<template>
    <div class="app-container">
        <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
            :model="formData" :rules="rules" size="medium" label-width="120px">
            <h2 style="text-align: center">安全作业及内务管理检查</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <!-- <el-col :span="8">
            <el-form-item label="年度" prop="auditYear">
              <el-date-picker
                type="year"
                v-model="formData.auditYear"
                format="yyyy"
                value-format="yyyy"
                :style="{ width: '100%' }"
                placeholder="请选择年度"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col> -->
                <el-col :span="8">
                    <el-form-item label="受检查部门" prop="deptId">
                        <el-cascader ref="reference" :style="{ width: '100%' }"
                            :props="{ value: 'id', checkStrictly: true, multiple: true }" :show-all-levels="false"
                            placeholder="请选择部门" v-model="formData.deptId" :options="deptOptions" @change="changeCascader"
                            @visible-change="visibleChange"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="部门负责人" prop="deptLeaderId">
                        <UserDialogSelection :disabled="$route.query.isInfo || isInfo || $route.query.isEdit"
                            @change="changeUserhostId" placeholder="请选择参加人员" v-model="formData.deptLeaderId">
                        </UserDialogSelection>
                        <!-- <UserDialog :disabled="$route.query.isInfo || isInfo" v-model="formData.deptLeaderId"
                            @change="changeUserhostId"></UserDialog> -->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="检查人员" prop="checkUserId">
                        <UserDialog :disabled="$route.query.isInfo || isInfo" v-model="formData.checkUserId"
                            @change="changeUserassistantsId"></UserDialog>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="检察人员" prop="joinId">
                        <UserDialogSelection :disabled="$route.query.isInfo || isInfo" @change="changejoinId"
                            placeholder="请选择参与人员" v-model="formData.joinId"></UserDialogSelection>
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="检测日期" prop="checkTime">
                        <el-date-picker v-model="formData.checkTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择检测日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item label="安全情况" prop="safeCondition">
                <el-radio-group v-model="formData.involveSafe">
                    <el-radio :label="1">涉及</el-radio>
                    <el-radio :label="0">不涉及</el-radio>
                </el-radio-group>
                <div class="" style="display: flex;">
                    自查：
                    <el-input :disabled="formData.involveSafe == 0" v-model="formData.safeCondition" type="textarea"
                        placeholder="请输入安全情况" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '80%' }"></el-input>
                </div>

                <div class="" style="display: flex;align-items: center;">
                    检查结果：
                    <el-radio-group v-model="formData.safeConditionResult" label="" :disabled="formData.involveSafe == 0">
                        <el-radio :label="1">符合</el-radio>
                        <el-radio :label="0">不符合</el-radio>
                    </el-radio-group>
                </div>

            </el-form-item>
            <el-form-item label="消防情况" prop="fireCondition">
                <el-radio-group v-model="formData.involveFire">
                    <el-radio :label="1">涉及</el-radio>
                    <el-radio :label="0">不涉及</el-radio>
                </el-radio-group>
                <div class="" style="display: flex;">
                    自查：
                    <el-input :disabled="formData.involveFire == 0" v-model="formData.fireCondition" type="textarea"
                        placeholder="请输入消防情况" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '80%' }"></el-input>
                </div>
                <div class="" style="display: flex;align-items: center;">
                    检查结果：
                    <el-radio-group v-model="formData.fireConditionResult" label="" :disabled="formData.involveFire == 0">
                        <el-radio :label="1">符合</el-radio>
                        <el-radio :label="0">不符合</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="有毒化学药品管理情况" prop="chemistryManageCondition">
                <el-radio-group v-model="formData.involveChemistry">
                    <el-radio :label="1">涉及</el-radio>
                    <el-radio :label="0">不涉及</el-radio>
                </el-radio-group>
                <div class="" style="display: flex;">
                    自查：
                    <el-input :disabled="formData.involveChemistry == 0" v-model="formData.chemistryManageCondition"
                        type="textarea" placeholder="请输入有毒化学药品管理情况" :autosize="{ minRows: 4, maxRows: 4 }"
                        :style="{ width: '80%' }"></el-input>
                </div>
                <div class="" style="display: flex;align-items: center;">
                    检查结果：
                    <el-radio-group v-model="formData.chemistryManageConditionResult" label=""
                        :disabled="formData.involveChemistry == 0">
                        <el-radio :label="1">符合</el-radio>
                        <el-radio :label="0">不符合</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="“三废”处置情况" prop="threeWasteCondition">
                <el-radio-group v-model="formData.involveThreeWaste">
                    <el-radio :label="1">涉及</el-radio>
                    <el-radio :label="0">不涉及</el-radio>
                </el-radio-group>
                <div class="" style="display: flex;">
                    自查：
                    <el-input :disabled="formData.involveThreeWaste == 0" v-model="formData.threeWasteCondition"
                        type="textarea" placeholder="请输入“三废”处置情况" :autosize="{ minRows: 4, maxRows: 4 }"
                        :style="{ width: '80%' }"></el-input>
                </div>
                <div class="" style="display: flex;align-items: center;">
                    检查结果：
                    <el-radio-group v-model="formData.threeWasteConditionResult" label=""
                        :disabled="formData.involveThreeWaste == 0">
                        <el-radio :label="1">符合</el-radio>
                        <el-radio :label="0">不符合</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="水电情况" prop="waterElectricCondition">
                <el-radio-group v-model="formData.involveWaterElectric">
                    <el-radio :label="1">涉及</el-radio>
                    <el-radio :label="0">不涉及</el-radio>
                </el-radio-group>
                <div class="" style="display: flex;">
                    自查：
                    <el-input :disabled="formData.involveWaterElectric == 0" v-model="formData.waterElectricCondition"
                        type="textarea" placeholder="请输入水电情况" :autosize="{ minRows: 4, maxRows: 4 }"
                        :style="{ width: '80%' }"></el-input>
                </div>
                <div class="" style="display: flex;align-items: center;">
                    检查结果：
                    <el-radio-group v-model="formData.waterElectricResult" label=""
                        :disabled="formData.involveWaterElectric == 0">
                        <el-radio :label="1">符合</el-radio>
                        <el-radio :label="0">不符合</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-col :span="24" v-if="btnShow">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import {
    safeManageCheckAdd,
    safeManageCheckManager,
    safeManageCheckInfo,
} from "@/api/secure/housekeeping.js";
import { deptTreeSelect } from "@/api/system/user";
export default {
    components: {},
    props: {
        isInfo: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "",
        },
        btnShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            formData: {
                auditYear: null,
                checkTime: null,
                safeCondition: undefined,
                fireCondition: undefined,
                address: undefined,
                deptLeaderId: undefined,
                checkUserId: undefined,
                joinId: undefined,
                waterElectricCondition: undefined,
                threeWasteCondition: undefined,
                chemistryManageCondition: undefined,
                deptId: [],
                involveSafe: 0,
                involveFire: 0,
                involveChemistry: 0,
                involveThreeWaste: 0,
                involveWaterElectric: 0,
                safeConditionResult: 0,
                fireConditionResult: 0,
                chemistryManageConditionResult: 0,
                threeWasteConditionResult: 0,
                waterElectricResult: 0,
                deptName: undefined
            },
            deptOptions: [],
            deptIdStringValue: '',
            deptIdStringLabel: '',
            rules: {
                auditYear: [
                    {
                        required: true,
                        message: "请选择年度",
                        trigger: "change",
                    },
                ],
                checkTime: [
                    {
                        required: false,
                        message: "请选择检查日期",
                        trigger: "change",
                    },
                ],
                safeCondition: [
                    {
                        required: false,
                        message: "请输入安全情况",
                        trigger: "blur",
                    },
                ],
                fireCondition: [
                    {
                        required: false,
                        message: "请输入消防情况",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入地点",
                        trigger: "blur",
                    },
                ],
                deptLeaderId: [
                    {
                        required: true,
                        message: "请输入部门负责人",
                        trigger: "change",
                    },
                ],
                checkUserId: [
                    {
                        required: true,
                        message: "请输入检查人",
                        trigger: "change",
                    },
                ],
                joinId: [
                    {
                        required: true,
                        message: "请输入参与人员",
                        trigger: "blur",
                    },
                ],
                waterElectricCondition: [
                    {
                        required: false,
                        message: "请输入水电情况",
                        trigger: "blur",
                    },
                ],
                threeWasteCondition: [
                    {
                        required: false,
                        message: "请输入三废情况",
                        trigger: "blur",
                    },
                ],
                chemistryManageCondition: [
                    {
                        required: false,
                        message: "请输入有毒化学药品管理情况",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "请选择部门",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    created() {
        this.getDeptTree();
        if (!this.$route.query.isEdit || !this.$route.query.isInfo || !this.isInfo) {
            this.formData.checkUserId = this.$store.state.user.id
            this.formData.checkUserName = this.$store.state.user.nickName
        }
        // if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
        //     this.getinfo();
        // }
    },
    mounted() { },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
                if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
                    this.getinfo();
                }
            });
        },
        changeCascader(e) {
            console.log(e);
            console.log(this.$refs.reference.getCheckedNodes());
            let arr = this.$refs.reference.getCheckedNodes()
            let list = []
            let label = []
            arr.forEach((item, index) => {
                list.push(item.value)
                label.push(item.label)
                console.log(item.value);
            })
            console.log(list);
            this.deptIdStringValue = list.toString()
            this.deptIdStringLabel = label.toString()
            console.log(this.deptIdStringValue, this.deptIdStringLabel);
            this.deptIdShow = true

        },
        visibleChange(e) {
        },
        changeUserhostId(e) {
            console.log(e);
            let arr = []
            e.forEach((item) => {
                arr.push(item.nickName)
            })
            this.formData.deptLeaderName = arr.toString();
        },
        changeUserassistantsId(e) {
            this.formData.checkUserName = e.nickName;
        },
        changejoinId(e) {
            this.formData.joinName = e.map((i) => i.nickName).toString();
        },
        getinfo() {
            return safeManageCheckInfo(this.$route.query.id || this.id).then(
                (response) => {
                    this.formData = response.data;
                    this.formData.deptLeaderId = this.formData.deptLeaderId.split(",");
                    this.formData.deptId = this.formData.deptId.split(',')
                    // 将ID转number类型
                    this.formData.deptId = this.formData.deptId.map(i => parseInt(i))

                    let list = []
                    // 多选部门回显取后端返回的ID
                    this.formData.deptId.map(i => {
                        list.push(this.findParentLot(i))
                    })
                    this.formData.deptId = list
                    this.deptIdStringValue = list.toString()
                    this.deptIdStringLabel = this.formData.deptName
                    console.log(this.formData.deptId, "==");
                }
            );
        },
        // 创建新数组 返回
        findParentLot(id) {
            const arr = []
            this.deployIdFun(this.deptOptions, id, arr)
            return arr.reverse()
        },
        // 逻辑代码 for循环 判断相同的id 取上级ID
        deployIdFun(options, id, newArr) {
            // console.log(options);
            options.forEach((v) => {
                if (v.id === id) {
                    newArr.push(id)
                    // console.log(newArr, 'newArr');
                    if (!v.parentId || v.parentId !== '0') {
                        this.deployIdFun(this.deptOptions, v.parentId, newArr)
                    }
                } else {
                    if (v.children && v.children.length) {
                        this.deployIdFun(v.children, id, newArr)
                    }
                }
            })
        },
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    query.deptId = this.deptIdStringValue
                    query.deptName = this.deptIdStringLabel
                    query.deptLeaderId = query.deptLeaderId.toString()
                    if (this.formData.safeManageCheckId != undefined) {
                        safeManageCheckManager(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        safeManageCheckAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            this.$tab.closeOpenPage();
        },
    },
};
</script>
  